<template>
  <div class="user-wrapper">
    <div class="content-box">
      <!-- <a href="http://doc.rycloud.zmrit.com/#/quick-start" target="_blank">
        <span class="action">
          <a-icon type="question-circle-o"></a-icon>
        </span>
      </a> -->
      <!-- <notice-icon class="action"/>
      <lang-select /> -->

      <a-popover placement="bottom">
        <template slot="content">
          <span>{{ nickname }}</span>
        </template>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <!-- <a-avatar class="avatar" size="small" :src="avatar"/> -->
          <span style="vertical-align: middle; font-size: 14px">{{ nickname | ellipsis }}</span>
        </span>
      </a-popover>

      <a-dropdown :trigger="['click']">
        <span
          @click="changeUser"
          title="切换账号"
          style="color: #fff;cursor: pointer;vertical-align: middle; font-size: 24px;margin-right: 7px;">
          <a-icon type="caret-down" />
        </span>
        <a-menu
          slot="overlay"
          style="max-height: 415px;overflow-y:auto">
          <a-menu-item
            style="padding: 10px;"
            @click="selectUserLogin"
            v-for="(item) in selectUsers"
            :key="item.userId">
            <span>{{ item.tenantName | ellipsis }}({{ item.userName }} </span><span style="color:#6871fc ;"> | </span><span>{{ item.loginName }})</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>

      <span
        @click="handleMoreMessage"
        style="position: relative;margin-right: 12px;">
        <img
          width="24px"
          style="cursor: pointer"
          src="@/assets/imgs/tishi.png"
          alt="">
        <i :class="{tishi_not_read: tishiStatus}"></i>
      </span>
      <div
        v-show="showMessage"
        class="message_warp">
        <ul class="top_tab">
          <li
            class="tab_li"
            :class="{tab_active: tabType === 5}"
            @click="changeTab(5)">
            通知公告
          </li>
          <li
            class="tab_li"
            :class="{tab_active: tabType === 1}"
            @click="changeTab(1)">
            设备注册
            <i :class="{not_read: deviceRegisterStatus}"></i>
          </li>
          <!-- <li
            class="tab_li"
            :class="{tab_active: tabType === 4}"
            @click="changeTab(4)">
            设备异常
            <i :class="{not_read: disconnectStatus}"></i>
          </li> -->
          <li
            class="tab_li"
            :class="{tab_active: tabType === 2}"
            @click="changeTab(2)">
            异地登录
            <i :class="{not_read: RemoteStatus}"></i>
          </li>
          <li
            class="tab_li"
            :class="{tab_active: tabType === 3}"
            @click="changeTab(3)">
            登录记录
          </li>
        </ul>
        <div
          ref="announcementListBox"
          class="bot_tab"
          v-show="tabType === 5">
          <ul class="bot_tab_warp">
            <li
              class="bot_tab_li"
              v-for="(item,index) in announcementList"
              :key="index">
              <div style="font-weight:bolder;font-size:14px">{{ item.noticeTitle }} </div>
              <div >{{ item.createDate }} </div>
              <div >{{ item.noticeContent }} </div>
            </li>
          </ul>
        </div>
        <div
          ref="registerListBox"
          class="bot_tab"
          v-show="tabType === 1">
          <ul class="bot_tab_warp">
            <li
              class="bot_tab_li"
              v-for="(item, index) in deviceRegisterList"
              :key="index"
              @click="changeStatus(item)">
              <p :class="{p_active: item.status == 1}">新设备注册至平台，设备接入号为{{ item.accessCode }}</p>
              <p :class="{p_active: item.status == 1}">{{ item.createDate }}</p>
            </li>
          </ul>
          <!--          <div class="no_message">-->
          <!--            <img src="@/assets/imgs/nomessage.png" alt="">-->
          <!--            <p>暂时没有收到通知哦～</p>-->
          <!--          </div>-->
        </div>
        <div
          ref="disconnectBox"
          class="bot_tab"
          v-show="tabType === 4">
          <ul class="bot_tab_warp">
            <li
              class="bot_tab_li"
              v-for="(item,index) in disconnectList"
              :key="index"
              @click="changeStatus(item)">
              <p :class="{p_active: item.status == 1}">{{ item.channelName }}频繁上下线：{{ transDict(item.disconnectDesc) || '未知' }}</p>
              <p :class="{p_active: item.status == 1}">{{ item.createTime }}</p>
            </li>
          </ul>
        </div>
        <div
          ref="remoteListBox"
          class="bot_tab"
          v-show="tabType === 2">
          <ul class="bot_tab_warp">
            <li
              class="bot_tab_li"
              v-for="(item,index) in remoteList"
              :key="index"
              @click="changeStatus(item)">
              <p :class="{p_active: item.status == 1}">您的账号在{{ item.remoteArea }}(IP:{{ item.remoteIpAddr }})发生异地登录行为</p>
              <p :class="{p_active: item.status == 1}">{{ item.createDate }}</p>
            </li>
          </ul>
        </div>
        <div
          ref="loginInfoBox"
          class="bot_tab"
          v-show="tabType === 3">
          <!--          <el-select v-model="value" placeholder="请选择" style="margin-left: 16px" @change="changeOs(value)">-->
          <!--            <el-option-->
          <!--              v-for="item in options"-->
          <!--              :key="item.value"-->
          <!--              :label="item.label"-->
          <!--              :value="item.value">-->
          <!--            </el-option>-->
          <!--          </el-select>-->
          <ul class="bot_tab_warp">
            <li
              class="bot_tab_li"
              v-for="(item,index) in loginInfoList"
              style="height: 60px"
              :key="index">
              <p>{{ item.loginTime }} </p>
            </li>
          </ul>
        </div>
        <div class="bottom_btn">
          <span class="allread" @click="readAll">全部已读</span>
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>历史记录</span>
            </template>
            <span @click="gotoAllRecord" class="icon iconfont icon-history"></span>
          </a-tooltip>

        </div>
      </div>

      <a-dropdown
        placement="bottomCenter"
        v-if="settingMenus && settingMenus.children && settingMenus.children.length">
        <span class="icon iconfont icon-shezhi"></span>
        <a-menu
          v-if="settingMenus && settingMenus.children && settingMenus.children.length"
          slot="overlay"
          class="dropdown-menu">
          <a-menu-item
            v-if="!menu.hidden"
            v-for="menu in settingMenus.children"
            :key="menu.key">
            <router-link :to="'/setting_system_iframe/' + menu.key">
              <span style="font-size: 16px;">{{ menu.title }}</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <!--      <a-dropdown>-->
      <span @click="handleLogout">
        <span class="icon iconfont icon-ai-out"></span>
      </span>
      <!--        <a-menu slot="overlay"-->
      <!--                class="user-dropdown-menu-wrapper">-->
      <!-- <a-menu-item key="0">
            <router-link :to="{ name: 'center' }">
              <a-icon type="user" />
              <span>个人中心</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="1">
            <router-link :to="{ name: 'settings' }">
              <a-icon type="setting" />
              <span>账户设置</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="2" disabled>
            <a-icon type="setting" />
            <span>测试</span>
          </a-menu-item>
          <a-menu-divider /> -->

      <!--          <a-menu-item key="3">-->
      <!--            <a href="javascript:;"-->
      <!--               @click="handleLogout">-->
      <!--              <a-icon type="logout" />-->
      <!--              <span>退出登录</span>-->
      <!--            </a>-->
      <!--          </a-menu-item>-->
      <!--        </a-menu>-->
      <!--      </a-dropdown>-->
    </div>
    <div
      class="warp"
      v-if="showWarp"
      @click="disAppear"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import NoticeIcon from '@/components/NoticeIcon'
import LangSelect from '@/components/tools/LangSelect'
import { mapActions, mapGetters } from 'vuex'
import {
  timeFix
} from '@/utils/util'
import {
  ACCESS_TOKEN
} from '@/store/mutation-types'
export default {
  name: 'UserMenu',
  components: {
    LangSelect,
    NoticeIcon
  },
  data () {
    return {
      showMessage: false,
      showWarp: false,
      tabType: 1,
      value: '1',
      options: [
        {
          value: '1',
          label: '全部'
        },
        {
          value: '2',
          label: '网页'
        },
        {
          value: '3',
          label: '客户端'
        },
        {
          value: '4',
          label: '微信小程序'
        }
      ],
      remoteList: [],
      announcementList: [],
      deviceRegisterList: [],
      loginInfoList: [],
      disconnectList: [],
      disconnectStatus: false,
      RemoteStatus: false,
      deviceRegisterStatus: false,
      tishiStatus: false,
      selectUsers: [],
      selectUserId: 0,
      logininforPage: 1, // 登陆记录分页
      loginEnd: false,
      deviceRegisterPage: 1, // 设备注册分页
      registerEnd: false,
      announcementEnd: false,
      announcementPage: 1, // 通知公告分页
      remoteListPage: 1, // 异地登陆分页
      remoteEnd: false,
      disconnectPage: 1, // 设备异常分页
      disconnectEnd: false,
      time: null,
      deviceAlarmTypeList: []
    }
  },
  computed: {
    ...mapGetters(['nickname', 'avatar', 'settingMenus', 'userInfo'])
  },
  created () {
    this.getDict({ dictType: 'device_alarm_type' }).then((res) => {
      if (res.code === 0) {
        this.deviceAlarmTypeList = res.rows
      } else {
        this.$message.error(res.msg)
      }
    })
  },
  mounted () {
    this.getRemoteList()
    this.getDisconnectList()
    this.getDeviceRegisterList()
    this.getAnnouncementList()
    this.getLogininforList()
    this.showUsers()
    this.$refs.announcementListBox.addEventListener('scroll', (e) => {
      const scrollTop = e.target.scrollTop
      const clientHeight = e.target.clientHeight
      const scrollHeight = e.target.scrollHeight
      if (scrollHeight - clientHeight - scrollTop < 20 && !this.time && !this.announcementEnd) {
        this.announcementPage += 1
        this.getAnnouncementList()
        this.time = setTimeout(() => {
          this.time = null
        }, 200)
      }
    })
    this.$refs.registerListBox.addEventListener('scroll', (e) => {
      const scrollTop = e.target.scrollTop
      const clientHeight = e.target.clientHeight
      const scrollHeight = e.target.scrollHeight
      if (scrollHeight - clientHeight - scrollTop < 20 && !this.time && !this.registerEnd) {
        this.deviceRegisterPage += 1
        this.getDeviceRegisterList()
        this.time = setTimeout(() => {
          this.time = null
        }, 200)
      }
    })
    this.$refs.remoteListBox.addEventListener('scroll', (e) => {
      const scrollTop = e.target.scrollTop
      const clientHeight = e.target.clientHeight
      const scrollHeight = e.target.scrollHeight
      if (scrollHeight - clientHeight - scrollTop < 20 && !this.time && !this.remoteEnd) {
        this.remoteListPage += 1
        this.getRemoteList()
        this.time = setTimeout(() => {
          this.time = null
        }, 200)
      }
    })
    this.$refs.loginInfoBox.addEventListener('scroll', (e) => {
      const scrollTop = e.target.scrollTop
      const clientHeight = e.target.clientHeight
      const scrollHeight = e.target.scrollHeight
      if (scrollHeight - clientHeight - scrollTop < 20 && !this.time && !this.loginEnd) {
        this.logininforPage += 1
        this.getLogininforList()
        this.time = setTimeout(() => {
          this.time = null
        }, 200)
      }
    })
    this.$refs.disconnectBox.addEventListener('scroll', (e) => {
      const scrollTop = e.target.scrollTop
      const clientHeight = e.target.clientHeight
      const scrollHeight = e.target.scrollHeight
      if (scrollHeight - clientHeight - scrollTop < 20 && !this.time && !this.disconnectEnd) {
        this.disconnectPage += 1
        this.getDisconnectList()
        this.time = setTimeout(() => {
          this.time = null
        }, 200)
      }
    })
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 6) {
        return value.slice(0, 6) + '...'
      }
      return value
    }
  },
  methods: {
    ...mapActions(['getDict', 'getDeviceDisconnect', 'deviceDisconnectMsgUpdate', 'getAnnouncement', 'deviceDisconnectMsgAllRead', 'Logout', 'getCodeLoginOut', 'getLoginRemote', 'updateLoginRemote', 'getLoginDeviceRegister', 'updateLoginDeviceRegister', 'getLogininfor', 'remoteUpdateStatus', 'deviceRegisterUpdateStatus', 'getUsersByPhone', 'loginByUserId']),
    gotoAllRecord () {
      this.showMessage = false
      this.$router.push('/tipMessage/index')
    },
    handleLogout () {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk: () => {
          return this.Logout({}).then(() => {
            const loginKey = sessionStorage.getItem('loginKey')
            if (loginKey) {
              return this.getCodeLoginOut({
                loginKey: loginKey
              }).then(res => {
                window.location.href = res.data
                Vue.ls.remove('saveRouter')
                Vue.ls.remove('saveRouterQuery')
                sessionStorage.setItem('loginKey', '')
              })
            } else {
              setTimeout(() => {
                window.location.reload()
              }, 16)
              Vue.ls.remove('saveRouter')
              Vue.ls.remove('saveRouterQuery')
            }
          }).catch(err => {
            this.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel () {
        }
      })
    },
    handleMoreMessage () {
      this.showMessage = !this.showMessage
      this.showWarp = !this.showWarp
    },
    changeTab (val) {
      this.tabType = val
    },
    changeStatus (val) {
      if (val.status == '0' && this.tabType == 2) {
        const params = {
          status: '1',
          remoteId: val.remoteId
        }
        this.updateRemoteState(params)
      } else if (val.status == '0' && this.tabType == 1) {
        const params = {
          status: '1',
          id: val.id
        }
        this.updateDeviceRegisterState(params)
      } else if (val.status == '2' && this.tabType == 4) {
        this.deviceDisconnectMsgUpdate({
          idList: [val.id]
        }).then((res) => {
          if (res.code === 0) {
            this.disconnectPage = 1
            this.disconnectEnd = false
            this.disconnectList = []
            this.getDisconnectList()
          }
        })
      }
    },
    // 设备异常
    getDisconnectList () {
      this.getDeviceDisconnect({
        pageNum: this.disconnectPage,
        pageSize: 10
      }).then(res => {
        this.disconnectStatus = false
        if (res.code === 0) {
          this.disconnectList.push(...res.rows)
          if (this.disconnectList.length <= res.total) {
            this.disconnectEnd = true
          }
          this.disconnectList.forEach(item => {
            if (item.status == '2') {
              this.disconnectStatus = true
            }
          })
          if (this.RemoteStatus === true || this.deviceRegisterStatus === true || this.disconnectStatus === true) {
            this.tishiStatus = true
          } else {
            this.tishiStatus = false
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    transDict (val) {
      const dictData = this.deviceAlarmTypeList.find((dict) => {
        return dict.dictValue + '' === val + ''
      })
      if (dictData) {
        return dictData.dictLabel
      } else {
        return val
      }
    },
    // 异地登录
    getRemoteList () {
      this.getLoginRemote({
        pageNum: this.remoteListPage,
        pageSize: 10
      }).then(res => {
        this.RemoteStatus = false
        if (res.code === 0) {
          this.remoteList.push(...res.rows)
          if (this.remoteList.length <= res.total) {
            this.remoteEnd = true
          }
          this.remoteList.forEach(item => {
            if (item.status == '0') {
              this.RemoteStatus = true
            }
          })
          if (this.RemoteStatus === true || this.deviceRegisterStatus === true) {
            this.tishiStatus = true
          } else {
            this.tishiStatus = false
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 异地登录 已读
    updateRemoteState (params) {
      this.updateLoginRemote(params).then(res => {
        if (res.code === 0) {
          console.log('success')
          this.remoteListPage = 1
          this.remoteEnd = false
          this.remoteList = []
          this.getRemoteList()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 通知公告
    getAnnouncementList () {
      this.getAnnouncement({
        pageNum: this.announcementPage,
        pageSize: 10
      }).then(res => {
        if (res.code === 0) {
          this.announcementList.push(...res.rows)
          if (this.announcementList.length >= res.total) {
            this.announcementEnd = true
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 设备注册
    getDeviceRegisterList () {
      this.getLoginDeviceRegister({
        pageNum: this.deviceRegisterPage,
        pageSize: 10
      }).then(res => {
        this.deviceRegisterStatus = false
        if (res.code === 0) {
          this.deviceRegisterList.push(...res.rows)
          if (this.deviceRegisterList.length >= res.total) {
            this.registerEnd = true
          }
          this.deviceRegisterList.forEach(item => {
            if (item.status == '0') {
              this.deviceRegisterStatus = true
            }
          })
          if (this.RemoteStatus === true || this.deviceRegisterStatus === true) {
            this.tishiStatus = true
          } else {
            this.tishiStatus = false
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 设备注册 未读
    updateDeviceRegisterState (params) {
      this.updateLoginDeviceRegister(params).then(res => {
        if (res.code === 0) {
          console.log('success')
          this.deviceRegisterPage = 1
          this.registerEnd = false
          this.deviceRegisterList = []
          this.getDeviceRegisterList()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 选择登录记录的客户端
    changeOs () {
      console.log(this.value)
      if (this.value == '1') {
        this.value = ''
      } else {
        this.value = (parseInt(this.value) - 1).toString()
      }
      console.log(this.value)
      this.getLogininforList(this.value)
    },
    // 登录记录
    getLogininforList () {
      this.getLogininfor({
        pageNum: this.logininforPage,
        pageSize: 10
      }).then(res => {
        if (res.code === 0) {
          this.loginInfoList.push(...res.rows)
          if (this.loginInfoList.length >= res.total) {
            this.loginEnd = true
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 全部已读
    readAll () {
      if (this.tabType === 1) {
        this.allReadTwo()
      } else if (this.tabType === 2) {
        this.allReadOne()
      } else if (this.tabType === 4) {
        this.allReadDisconnect()
      }
    },
    // 异地登录全部已读
    allReadOne () {
      this.remoteUpdateStatus().then(res => {
        if (res.code === 0) {
          this.remoteListPage = 1
          this.remoteEnd = false
          this.remoteList = []
          this.getRemoteList()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 设备注册全部已读
    allReadTwo () {
      this.deviceRegisterUpdateStatus().then(res => {
        if (res.code === 0) {
          this.deviceRegisterPage = 1
          this.registerEnd = false
          this.deviceRegisterList = []
          this.getDeviceRegisterList()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    allReadDisconnect () {
      this.deviceDisconnectMsgAllRead().then((res) => {
        if (res.code === 0) {
          this.disconnectPage = 1
          this.disconnectEnd = false
          this.disconnectList = []
          this.getDisconnectList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    disAppear () {
      this.showMessage = false
      this.showWarp = false
    },
    showUsers () {
      if (this.userInfo.phonenumber) {
        this.getUsersByPhone({ phone: this.userInfo.phonenumber }).then(res => {
          if (res.code === 0) {
            const arr = []
            res.data.forEach((item) => {
              if (item.userId != this.userInfo.userId) {
                arr.push(item)
              }
            })
            this.selectUsers = arr
          }
        })
      }
    },
    selectUserLogin (obj) {
      this.selectUserId = obj.key
      if (!this.selectUserId) {
        this.$message.error('请选择登录用户')
        return
      }

      this.loginByUserId({
        userId: this.selectUserId
      })
        .then(res => {
          if (res.code === 0) {
            Vue.ls.set(ACCESS_TOKEN, res.token)
            Vue.ls.set('ACCESS_TENANTID', res.tenantId)
            this.$store.commit('SET_TOKEN', res.token)
            this.$router.push({
              name: 'dashboard',
              query: {
                userId: res.userId,
                loginName: res.loginName
              }
            }, () => {
              this.$store.dispatch('GetInfo')
              this.$notification.success({
                message: '欢迎',
                description: `${timeFix()}，欢迎回来`
              })
            })
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    changeUser () {
      if (!this.selectUsers || this.selectUsers.length == 0) {
        this.$message.error('未查询到其他账号，无法切换')
      }
    }
  }
}
</script>
<style lang="less" scoped>
ul,
li,
p,
span {
  margin: 0;
  padding: 0;
  list-style: none;
}
.warp {
  position: fixed;
  width: 1000%;
  height: 1000%;
  left: 0;
  top: 0;
  z-index: -1;
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 1px; /*对垂直流动条有效*/
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  /*background-color: #abb2b9;*/
}
.setting_icon {
  color: #ffffffa6;
  font-size: 18px;
  line-height: 64px;
  vertical-align: middle;
  margin-right: 15px;
  cursor: pointer;
}
.dropdown-menu {
  text-align: center;
  font-size: 16px;
  /deep/.ant-dropdown-menu-item {
    padding: 4px 30px;
  }
}
.tishi_not_read {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #f53f3f;
  position: absolute;
  top: 0;
  right: 0;
}
.icon-shezhi{
  color: #fff;
  margin-right: 12px;
  font-size: 18px;
  vertical-align: bottom;
}
.icon-ai-out{
  color: #fff;
  font-size: 16px;
  vertical-align: bottom;
}
.content-box {
  position: relative;
  .message_warp {
    position: absolute;
    left: -210px;
    top: 50px;
    width: 320px;
    height: 440px;
    background-color: #fff;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
    text-align: left;
    .top_tab {
      width: 100%;
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #e5e6eb;
      overflow: hidden;
      .tab_li {
        position: relative;
        color: #646566;
        font-size: 14px;
        text-align: center;
        width: 56px;
        margin-left: 16px;
        float: left;
        cursor: pointer;
        .not_read {
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background-color: #f53f3f;
          position: absolute;
          top: 14px;
          right: -5px;
        }
      }
      .tab_active {
        color: #212429;
        font-weight: 700;
      }
      .tab_right {
        font-size: 12px;
        float: right;
        margin-right: 16px;
        color: #4660ff;
        cursor: pointer;
      }
    }
    .bot_tab {
      width: 100%;
      height: 336px;
      margin-top: 16px;
      overflow-y: scroll;
      .no_message {
        width: 100%;
        height: 100%;
        position: relative;
        img {
          width: 122px;
          height: 122px;
          position: absolute;
          top: 35%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        p {
          color: #c9cdd4;
          font-size: 12px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .bot_tab_warp {
        .bot_tab_li {
          box-sizing: border-box;
          padding-left: 16px;
          padding-right: 16px;
          width: 100%;
          min-height: 60px;
          margin-bottom: 8px;
          cursor: pointer;
          div{
            width: 100%;
            font-size: 12px;
            color: #323233;
            line-height: 20px;
          }
          p {
            width: 100%;
            font-size: 12px;
            color: #323233;
            line-height: 20px;
            padding-top: 8px;
          }
          .p_active {
            color: #c9cdd4;
          }
        }
        .bot_tab_li:hover {
          background: #f7f8fa;
        }
      }
    }
    .bottom_btn{
      height: 40px;
      line-height: 40px;
      padding: 0 24px;
      .allread {
        font-size: 12px;
        color: #4660ff;
        cursor: pointer;
      }
      .icon-history{
        float: right;
        cursor: pointer;
      }
    }
  }
}
</style>
